<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器如何判断是否支持 webp 格式图片</title>
<style type="text/css">  
</style>
</head>
<body>
<pre>
（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如
果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格
式的图片。

（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断
返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。
详细资料可以参考： <a href="https://blog.csdn.net/jesslu/article/details/82495061" rel="nofollow">《判断浏览器是否支持 WebP 图片》</a><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL" rel="nofollow">《toDataURL()》</a>
</pre>
<script type="text/javascript">
</script>
</body>
</html>